<template>
  <div class="fee-container">
    <h2 class="title">水电费管理</h2>

    <!-- 搜索框 -->
    <el-input v-model="searchQuery" placeholder="输入宿舍号搜索" class="search-input" />

    <!-- 表格 -->
    <el-table :data="filteredFees" border stripe style="width: 100%">
      <el-table-column prop="roomNumber" label="宿舍号"></el-table-column>
      <el-table-column prop="waterUsage" label="用水量（吨）"></el-table-column>
      <el-table-column prop="electricityUsage" label="用电量（度）"></el-table-column>
      <el-table-column prop="month" label="月份"></el-table-column>
      <el-table-column prop="totalFee" label="总费用（元）"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog :title="isEditing ? '编辑记录' : '新增记录'" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="120px">
        <el-form-item label="宿舍号">
          <el-input v-model="form.roomNumber" />
        </el-form-item>
        <el-form-item label="用水量（吨）">
          <el-input-number v-model="form.waterUsage" :min="0" />
        </el-form-item>
        <el-form-item label="用电量（度）">
          <el-input-number v-model="form.electricityUsage" :min="0" />
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker v-model="form.month" type="month" value-format="yyyy-MM" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-button type="primary" @click="openAddDialog" class="add-button">新增记录</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      dialogVisible: false,
      isEditing: false,
      form: {
        id: null,
        roomNumber: '',
        waterUsage: 0,
        electricityUsage: 0,
        month: ''
      },
      fees: [
        { id: 1, roomNumber: '201', waterUsage: 10, electricityUsage: 50, month: '2023-09', totalFee: 120 },
        { id: 2, roomNumber: '202', waterUsage: 8, electricityUsage: 40, month: '2023-09', totalFee: 96 }
      ]
    }
  },
  computed: {
    filteredFees() {
      if (!this.searchQuery) return this.fees
      return this.fees.filter(f => f.roomNumber.includes(this.searchQuery))
    }
  },
  methods: {
    openAddDialog() {
      this.isEditing = false
      this.form = {
        id: null,
        roomNumber: '',
        waterUsage: 0,
        electricityUsage: 0,
        month: ''
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isEditing = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleDelete(id) {
      this.$confirm('确定删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fees = this.fees.filter(f => f.id !== id)
        this.$message.success('删除成功')
      })
    },
    handleSubmit() {
      if (this.isEditing) {
        const index = this.fees.findIndex(f => f.id === this.form.id)
        this.fees.splice(index, 1, this.form)
        this.$message.success('更新成功')
      } else {
        this.form.id = Date.now()
        this.form.totalFee = this.form.waterUsage * 2 + this.form.electricityUsage * 1.5 // 示例计费方式
        this.fees.push({ ...this.form })
        this.$message.success('添加成功')
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.fee-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.search-input {
  max-width: 300px;
  margin-bottom: 20px;
}

.add-button {
  margin-top: 20px;
}
</style>